<blockquote class="layui-elem-quote">引用区域的文字</blockquote>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">商品名</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" name="name" required placeholder="请输入商品名">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">简介</label>
        <div class="layui-input-block">
            <textarea name="dscp" placeholder="请输入商品简介" class="layui-textarea" required ></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">售价</label>
        <div class="layui-input-block">
            <input class="layui-input" type="number" name="price" required placeholder="请输入商品售价" step="0.01">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标价</label>
        <div class="layui-input-block">
            <input class="layui-input" type="number" name="markPrice" required placeholder="请输入商品标价" step="0.01">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">颜色</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" name="color" required placeholder="请输入商品颜色">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">版本</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" name="version" required placeholder="请输入商品版本">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">数量</label>
        <div class="layui-input-block">
            <input class="layui-input" type="number" name="count" required placeholder="请输入商品数量">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea name="content" placeholder="请输入商品描述" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">主页推荐</label>
        <div class="layui-input-inline">
            <input type="radio" name="recom" value="0" title="不推荐" checked>
            <input type="radio" name="recom" value="1" title="推荐">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-inline">
            <select name="parentId" lay-filter="parentId"></select>
            <select name="categoryId"></select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block">
            <!--图片上传的控件-->
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test2">多图片上传</button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览图：
                    <div class="layui-upload-list" id="demo2"></div>
                </blockquote>
            </div>

        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
<!--            <input type="hidden" name="pic">-->
            <button class="layui-btn" type="submit" lay-submit lay-filter="goods-add">提交</button>
        </div>
    </div>
</form>

<script>
    layui.use(['form','element','upload'],function () {
        var form = layui.form,
            element = layui.element,
            upload = layui.upload;
            $ = layui.$;
        form.render();``
        // 获取分类
        $.ajax({
            url: '/api/category',
            data: {parentId:0},
            type: 'get',
            dataType: 'json',
            success: function (result) {
                var html = '<option value="">请选择分类</option>';
                //遍历查询到的数据
                $.each(result.data,function (index,item) {
                    html += '<option value="'+item.id+'">'+item.name+'</option>'
                });
                $('select[name="parentId"]').html(html);
                form.render(); // 查询到的放到表单中
            },
            error: function () {
                layer.msg("父分类请求失败")
            }
        });

        //二级分类
        form.on('select(parentId)', function(data) {
            //获取被选中的父分类
            var parentId = $('select[name="parentId"]').val(); // data.value;
            console.log(parentId)
            if(parentId){
                $.ajax({
                    url: '/api/category',
                    data: {parentId:parentId},
                    type: 'get',
                    dataType: 'json',
                    success: function (result) {
                        var html = '<option value="">请选择分类</option>';
                        //遍历
                        $.each(result.data,function (index,item) {
                            html += '<option value="'+item.id+'">'+item.name+'</option>';
                        });
                        $("select[name='categoryId']").html(html);
                        form.render();
                    },
                    error: function () {
                        layer.msg("分类获取失败")
                        form.render();
                    }
                });
            }else{
                $("select[name='categoryId']").html('');
            }
        });
        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: '/api/upload/' //必填项
            ,multiple: true
            ,before: function (obj) {

            }
            ,done: function (res) {
                //
                //
                $('#demo2').append('\
                <img style="width: 90px" \
                src="/upload/'+res.data+'"\
                data-name="'+res.data+'">\
                ');
            }
        });
        //删除预览图
        $('#demo2').on('click','img',function () {
            $(this).remove();
        });
        //提交表单
        form.on('submit(goods-add)',function (data) {
            //获取图片的参数
            //定义一个名为pics的数组，对应于entity中的pics
            var pics = [];
            //遍历img
            $('#demo2 img').each(function () {
                //获取遍历到的每一个img
                var url = $(this).attr('data-name');
                //追加一个对象
                pics.push({url:url});
            });
            data.field.pics=pics;
            //提交
            $.ajax({
                url: '/api/goods',
                data: JSON.stringify(data.field),
                contentType: 'application/json; charset=utf-8',
                type: 'post',
                dataType: 'json',
                success: function (result) {
                    if(result.code === 0){
                        layer.msg("商品录入成功")
                        openUrl('/goods/index.html');
                    }else{
                        layer.msg(result.msg)
                    }
                },
                error: function () {
                    layer.msg("商品录入失败")
                }
            });
            return false;
        });


    });
</script>